<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div
    style="
      width: 100%;
      height: 2150px;
      margin: 0 auto;
      background-color: #f4a258;
    ">
    <div class="div111">
      <img src="../../assets/vipcece.jpg" class="img66">
    </div>
    <div class="div1">
      <div class="div6">
        <div class="div6-2">
          <div class="div6-2-1" v-for="memberAll in memberAllList" :key="memberAll.id">
            <div class="img4" style="background-color: #393532;border-radius: 20px 20px 0 0;">
              <img :src=" 'http://101.43.223.224:8765/image/getImageById?id=' + memberAll.memberUrl " class="img2"/>
            </div>
            <div class="div6-2-2" style="height: 50PX;background-color: #393532;margin-top: -2px;border-radius: 0 0 20px 20px;">
             <span style="font-size: 28px;color: #cccaca;">{{ memberAll.memberName }}会员 : </span>
             <span style="font-size: 30px; color: #fc4e03">￥{{ memberAll.price }}</span>
            </div>
          </div>
        </div>
        <div><br><br><br>
          <div style="height: 69px; width: 100%; background: rgb(254,226,189);"></div>
      <img
      @click="handlePayClick"
        style="
          width: 100%;
          height: 100%;
          border-radius: 0 0 20px 20px;
        "
        src="../../assets/21.png"
        alt=""
    />
    <div style="width: 100%; height:100px; background: #f4a258; "></div>
    <img
    @click="handlePayClick"
        style="
          width: 100%;
          height: 100%;
          border-bottom-left-radius: 30px;
          border-bottom-right-radius: 30px;
        "
        src="../../assets/22.png"
        alt=""
    />
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import { EventBus } from '@/main'
export default {
  data () {
    return {
      memberAllList: {},
      loginId: '',
      userInfo: {}
    }
  },
  created () {
    this.memberList()
    // 获取用户存储的信息
    this.userInfo = JSON.parse(localStorage.getItem('user'))
    if (this.userInfo) {
      this.userInfo = this.userInfo.data
      this.loginId = this.userInfo.id
    }
  },
  methods: {
    handlePayClick () {
      if (this.loginId === null || this.loginId === '') {
        // 用户点击了确认按钮，进行登录操作
        EventBus.$emit('showLoginDialog', true)
      } else {
        this.$router.push('/memberplacing')
      }
    },
    memberList () {
      this.$axios.post('/memberType/selectMemberList').then((res) => {
        this.memberAllList = res.data.data
      })
    }
  }
}
</script>

<style>
.div1 {
  width: 1200px;
  /* background: red; */
  margin: 0 auto;
}
.div111{
  width: 100%;
  height: 870px;
  /* background: #f4a258; */
}
.img66 {
  width: 100%;
  height: 100%;
}
.div6 {
  width: 100%;
  height: 340px;
  /* background: green; */
  background-color: #FEE2BD;
  border-radius: 20px 20px 0 0;

}
.divdd {
  width: 100%;
  height: 20px;
  /* background: purple; */
}
.div6-2 {
  width: 100%;
  height: 77%;
  /* background: yellow; */
  display: flex;
  margin-left: 10px;
  margin-right: 10px;
  justify-content: flex-start;
}
.div6-2-1 {
  width: 32%;
  height: 100%;
  float: left;
  margin-right: 10px;
  border-radius: 4%; /* 设置边角半径为 50%，实现圆形效果 */
}
.div6-2-2{
    border-radius: 4%;
}
.img4 {
    margin-top: 35PX;
  width: 100%;
  height: 90%;
}
.img2 {
    margin-top: 10px;
  width: 95%;
  height: 95%;
  border-radius: 4%; /* 设置边角半径为 50%，实现圆形效果 */
}
</style>
